/*
奥特曼卡牌游戏的网页实现版本
使用老样子的Vue+vant，两大组件开发

*/

//Vue.use(Dialog);

Vue.component('home',{
	data(){
		return {
			msg: 'abc'
		}
	},
	created(){
		console.log("main created");
	},
	mounted(){
		console.log("main mounted");
		
	},
	template: `<div>
			<div align="center">
				<h1>凹凸曼卡牌游戏</h1>
			</div>
			
			<br>
			<br>
			<br>
			<br>
			<br>
			
			<div align="center">
				<h3>
					<router-link to="/game">游戏开始</router-link>
				</h3>
				<br>
				<br>
				<br>
				<h3>
					查看牌组
				</h3>
			</div>
			
		</div>`
});

//初始化数据
var a1 = 'abc';
var woFang;
var diFang;

//卡牌数据组
var paisColor = ['黄','蓝'];
var cardInfoTest1 = {
	"id":1,
	"名称":"德凯奥特曼",
	"星数":10,
	"攻击值":160000,
	"防御值":154000,
	"宇宙":"圈",
	"城市":"圈",
	"森林":"圈",
	"海洋":"圈"
}

var atms = [
	{
		"id":1,
		"名称":"德凯奥特曼",
		"星数":10,
		"攻击值":160000,
		"防御值":154000,
		"宇宙":"圈",
		"城市":"圈",
		"森林":"圈",
		"海洋":"圈"
	},{
		"id":2,
		"名称":"凯鲁比姆",
		"星数":6,
		"攻击值":79000,
		"防御值":73000,
		"宇宙":"叉",
		"城市":"圈",
		"森林":"圈",
		"海洋":"角"
	},{
		"id":3,
		"名称":"特利伽奥特曼",
		"星数":6,
		"攻击值":79000,
		"防御值":77000,
		"宇宙":"角",
		"城市":"圈",
		"森林":"圈",
		"海洋":"角"
	},{
		"id":4,
		"名称":"超级芝顿死镰",
		"星数":6,
		"攻击值":79000,
		"防御值":75000,
		"宇宙":"圈",
		"城市":"圈",
		"森林":"圈",
		"海洋":"角"
	},{
		"id":5,
		"名称":"邪恶特利伽",
		"星数":6,
		"攻击值":78000,
		"防御值":75000,
		"宇宙":"角",
		"城市":"角",
		"森林":"圈",
		"海洋":"圈"
	},{
		"id":6,
		"名称":"捷德奥特曼",
		"星数":6,
		"攻击值":70000,
		"防御值":74000,
		"宇宙":"圈",
		"城市":"角",
		"森林":"圈",
		"海洋":"圈"
	},{
		"id":7,
		"名称":"赛罗奥特曼",
		"星数":8,
		"攻击值":84000,
		"防御值":84000,
		"宇宙":"圈",
		"城市":"圈",
		"森林":"圈",
		"海洋":"角"
	},{
		"id":8,
		"名称":"混沌艾力加尔",
		"星数":6,
		"攻击值":75000,
		"防御值":70000,
		"宇宙":"叉",
		"城市":"圈",
		"森林":"圈",
		"海洋":"角"
	},{
		"id":9,
		"名称":"阿基拉",
		"星数":6,
		"攻击值":74000,
		"防御值":71000,
		"宇宙":"圈",
		"城市":"角",
		"森林":"圈",
		"海洋":"角"
	},{
		"id":10,
		"名称":"欧布奥特曼",
		"星数":6,
		"攻击值":73000,
		"防御值":75000,
		"宇宙":"圈",
		"城市":"角",
		"森林":"圈",
		"海洋":"圈"
	},{
		"id":11,
		"名称":"基里艾洛德人",
		"星数":6,
		"攻击值":76000,
		"防御值":79000,
		"宇宙":"圈",
		"城市":"圈",
		"森林":"圈",
		"海洋":"圈"
	},{
		"id":12,
		"名称":"纳伊斯奥特曼",
		"星数":6,
		"攻击值":72000,
		"防御值":79000,
		"宇宙":"角",
		"城市":"圈",
		"森林":"圈",
		"海洋":"角"
	},{
		"id":13,
		"名称":"尼奥斯奥特曼",
		"星数":6,
		"攻击值":71000,
		"防御值":76000,
		"宇宙":"圈",
		"城市":"角",
		"森林":"圈",
		"海洋":"圈"
	},{
		"id":14,
		"名称":"卡内贡",
		"星数":6,
		"攻击值":76000,
		"防御值":70000,
		"宇宙":"叉",
		"城市":"圈",
		"森林":"圈",
		"海洋":"角"
	},{
		"id":15,
		"名称":"斯菲亚乔莫斯",
		"星数":6,
		"攻击值":79000,
		"防御值":74000,
		"宇宙":"圈",
		"城市":"圈",
		"森林":"角",
		"海洋":"角"
	},{
		"id":16,
		"名称":"布鲁奥特曼",
		"星数":6,
		"攻击值":73000,
		"防御值":75000,
		"宇宙":"圈",
		"城市":"圈",
		"森林":"圈",
		"海洋":"角"
	},{
		"id":17,
		"名称":"斯菲亚尼奥美加斯",
		"星数":6,
		"攻击值":72000,
		"防御值":77000,
		"宇宙":"圈",
		"城市":"圈",
		"森林":"角",
		"海洋":"角"
	},{
		"id":18,
		"名称":"黑暗特利伽",
		"星数":6,
		"攻击值":76000,
		"防御值":78000,
		"宇宙":"圈",
		"城市":"角",
		"森林":"圈",
		"海洋":"角"
	},{
		"id":19,
		"名称":"迪迦奥特曼",
		"星数":6,
		"攻击值":72000,
		"防御值":72000,
		"宇宙":"角",
		"城市":"圈",
		"森林":"圈",
		"海洋":"圈"
	},{
		"id":20,
		"名称":"改造海兹王",
		"星数":6,
		"攻击值":74000,
		"防御值":74000,
		"宇宙":"角",
		"城市":"圈",
		"森林":"圈",
		"海洋":"角"
	},{
		"id":21,
		"名称":"阿古茹奥特曼",
		"星数":6,
		"攻击值":73000,
		"防御值":75000,
		"宇宙":"圈",
		"城市":"圈",
		"森林":"角",
		"海洋":"圈"
	},{
		"id":22,
		"名称":"镜子骑士",
		"星数":6,
		"攻击值":72000,
		"防御值":75000,
		"宇宙":"圈",
		"城市":"圈",
		"森林":"角",
		"海洋":"角"
	},{
		"id":23,
		"名称":"诺亚奥特曼",
		"星数":10,
		"攻击值":159000,
		"防御值":150000,
		"宇宙":"圈",
		"城市":"圈",
		"森林":"圈",
		"海洋":"圈"
	},{
		"id":24,
		"名称":"奥德鲁",
		"星数":6,
		"攻击值":71000,
		"防御值":69000,
		"宇宙":"圈",
		"城市":"叉",
		"森林":"圈",
		"海洋":"角"
	},{
		"id":25,
		"名称":"莉莉安娜",
		"星数":6,
		"攻击值":72000,
		"防御值":70000,
		"宇宙":"叉",
		"城市":"圈",
		"森林":"角",
		"海洋":"圈"
	},{
		"id":26,
		"名称":"伊尔迪克",
		"星数":6,
		"攻击值":77000,
		"防御值":75000,
		"宇宙":"圈",
		"城市":"圈",
		"森林":"角",
		"海洋":"角"
	},{
		"id":27,
		"名称":"劳瑞尔",
		"星数":6,
		"攻击值":78000,
		"防御值":75000,
		"宇宙":"角",
		"城市":"叉",
		"森林":"圈",
		"海洋":"圈"
	},{
		"id":28,
		"名称":"瓦尼尔",
		"星数":7,
		"攻击值":89000,
		"防御值":84000,
		"宇宙":"圈",
		"城市":"角",
		"森林":"圈",
		"海洋":"圈"
	},{
		"id":29,
		"名称":"维罗妮卡",
		"星数":7,
		"攻击值":88000,
		"防御值":83000,
		"宇宙":"圈",
		"城市":"圈",
		"森林":"圈",
		"海洋":"圈"
	},{
		"id":30,
		"名称":"沃格尔",
		"星数":6,
		"攻击值":71000,
		"防御值":70000,
		"宇宙":"圈",
		"城市":"圈",
		"森林":"角",
		"海洋":"叉"
	},{
		"id":31,
		"名称":"维娜",
		"星数":9,
		"攻击值":98000,
		"防御值":93000,
		"宇宙":"圈",
		"城市":"角",
		"森林":"圈",
		"海洋":"圈"
	},{
		"id":32,
		"名称":"凡妮莎",
		"星数":6,
		"攻击值":77000,
		"防御值":74000,
		"宇宙":"角",
		"城市":"圈",
		"森林":"角",
		"海洋":"圈"
	}
];

var ClassTest1 = function(param){//此类是测试类
		
	if(typeof param == 'underfined'){
		init1();
	}else{
		init2();
	}
	
	function init1(){
		console.log("ClassTest1 init1()");
	}
	function init2(){
		console.log("ClassTest1 init2()");
	}
	
	function toString2(){
		console.log("toString2()");
		
	}
	
	return{
		toString1:function(){
			toString2();
		}
	}
}

var ClassWoFang = function(param){
	
	if(typeof param == 'underfined'){
		init1();
	}else{
		init2();
	}
	
	function init1(){
		console.log("ClassTest1 init1()");
	}
	function init2(){
		console.log("ClassTest1 init2()");
	}
	
	function toString2(){
		console.log("toString2()");
		
	}
	
	return{
		toString1:function(){
			toString2();
		}
	}
}
var ClassDiFang = function(param){
	
	if(typeof param == 'underfined'){
		init1();
	}else{
		init2();
	}
	
	function init1(){
		console.log("ClassTest1 init1()");
	}
	function init2(){
		console.log("ClassTest1 init2()");
		
		
	}
	
	function toString2(){
		console.log("toString2()");
		
	}
	
	return{
		toString1:function(){
			toString2();
		}
	}
}

var shuffle = function(v){ 
	for(var j, x, i = v.length; i; j = parseInt(Math.random() * i), x = v[--i], v[i] = v[j], v[j] = x); 
	return v; 
}; 

var ct1 = new ClassTest1(); 

var wfPais = [];
var dfPais = [];
var wfszPais = [];
var dfszPais = [];


(function(){
	console.log("load main.js");
	/*
	console.log("a1-=>",a1);
	console.log("ct1.toString1()-=>");
	ct1.toString1();
	
	console.log("paisColor-=>"+paisColor);
	console.log("cardInfoTest1-=>"+JSON.stringify(cardInfoTest1));
	console.log("atms-=>"+JSON.stringify(atms));
	*/
	
	initData();
	
	woFang = new ClassWoFang();
	diFang = new ClassDiFang();
})()

function initData(){
	console.log("initData");
	
	for(var i1=0;i1<atms.length;i1++){
		var tmp1 = atms[i1];
		wfPais.push(tmp1);
	}
	
	
	for(var i1=0;i1<atms.length;i1++){
		var tmp1 = atms[i1];
		dfPais.push(tmp1);
	}
	
	wfPais = shuffle(wfPais);
	dfPais = shuffle(dfPais);
	
}



/*

系统说明
程序流程说明。
1，初始化所有基础数据。
	a),包括牌堆数据
		1),多少张卡牌
		2),是否考虑加入两幅扑克牌，用扑克牌来代替
	b),包括双方对战的数据初始化
		1),卡牌数据初始化，两边个有20张卡牌，乱序后赋值。
		2),然后各抽顶部4张卡片
	c),定义所需要的数值
		1),在卦位上卡牌的状体数值
		2),是横置状体还是竖置状态
	d),卡牌属性的定制
		1),名称
		2),攻击力
		3),防御力
		4),卡牌等级星数
		5),卡牌属性
2，分别洗牌，加入牌堆数组。
3，定义玩法，牌组为按钮，点击查看详情，并且确定动作。
4，定制卡组，确定卡组的属性
	a),卡组的属性有
		1),攻击值
		2),防御值
		3),等级星数
5，定义十六卦，会产生的效果。		
6，绘制游戏界面，定义模块。
	a),定义主界面，把部分游戏规则写入。
	b),定义卡组界面，把所有卡牌列出，并且可用查看详情。
	c),定义对战界面，绘制界面游戏对战要素


游戏界面设计

+----------------------------------------------+
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|





https://cdn.bootcdn.net/ajax/libs/phaser-ce/2.20.0/phaser.min.js




奥特曼卡牌，抽取后，现只有收藏价值，无法游玩。
新出的奥特曼英雄对决，也是新出的卡牌，无法使用老的游戏卡牌游玩。

所以根据老的，也就是现出的抽卡卡牌，来发明一套对战的方式。
此程序，就是简单演示，此游戏如何简单的入门和游玩。

基本玩法介绍
一回合里，分为摸出牌阶段和攻击阶段。
游戏玩法，玩家各准备20张卡牌，（实际游玩可以24-25张，4-5张作为备用）
将20张卡牌洗牌后，放于棋盘下方。

棋盘上共有八个放牌的格子，对于八卦。
双方各四个，用于放牌对战。分为正和偏。
双方各有一个祭牌区，最多放5张牌。

另外左边为得分区，得到5张牌，此局胜利。
右边为休息区，用来放置，临时下场的卡牌，可以在此再次上场。

先摸四张卡片，选一张放在祭牌区。正方先开始
一局开始，首先是开始摸牌，摸牌从底部开始摸，因为，奥特曼牌正反面都有牌的信息。
摸牌前可以先看下底牌，然后决定是否要暗牌出牌，如要可以拿，一张祭牌，覆盖在上面，拿到对应的，战斗区。
祭牌区，如没有卡牌，必须立刻补上一张卡牌，如没有卡牌补上，那祭牌区，不可用掉现有的卡牌。

如果不是，决定不做暗牌出，则摸如这张牌到自己的手牌中。

每回合可以弃一张手牌到祭牌区，祭牌区最多只能放5张手牌。
每回合可以出一张手牌（如此回合开始时出过暗牌，那不可再出）

出牌分为，攻击状态，和防御状态。攻击状态，攻击阶段里，可以发动攻击。
防御状态，横置卡牌，于战斗区，则可以承受敌方的攻击（有横置卡牌的，必须先攻击横置卡牌，自带嘲讽）。
并且防御状态的卡牌，可以申请防御援助，就是再出一张牌，放于牌的左边，然后累计防御值相加，为当前此区的总防御值。
防御增援的卡牌，必须是同星的，和地形效果不可以为叉。

放置攻击状态，必须是同星牌祭奠掉，才可用召唤，高一星召唤必须祭奠两张。

在当前回合，如果战斗区已经有横置的防御牌，则可以添加一个大于此牌等级，至少多一星的卡牌，并且攻击一次后就要到休息区去。
作为联合攻击卡牌添加，但是地形属性不可为叉。
在战斗阶段可以攻击堆放，并且战斗数值叠加。总计输出。

攻击阶段，每攻击状态的张牌有一次攻击机会。可以攻击对方的牌，按照顺序攻击
横置->竖置->祭牌区里的牌，从上往下，从左到右。
对方横置状态，攻击胜利，获取对方卡牌，攻击失败，手牌回到休息区。
对方竖置状态，攻击胜利，获取对方卡牌，攻击失败，失去此牌。

获得到对方的牌，则放入自方棋盘的计分区内。（得到5分，既得5张卡牌，则此局胜利）
胜利者在对方交还计分区的卡牌时，可以盲抽出一张对方的卡牌，加入自己，卡组堆里。
双方要对战五局，则为一场，最终输者要交出，输给对方的卡牌，既为，对方每局胜利抽取后已在对方牌堆里的卡牌。


摇八卦
在摸出牌，攻击和防御阶段，都可以摇一次八卦，必须使用一张祭牌区中的牌，
祭牌区中没有牌，将不可摇卦。
八卦根据，不同的组合会有，不同的效果，可以使用。
一半为攻击防御等效果，一半为魔法效果。





圆圈-增大攻击效果，提高攻击数值。
丢两个硬币，如两个面不相同，即可触发。
然后再扔下三个硬币，即可触发（攻击值x1.2-1.9）的概率
根据第几卦决定。

根据八卦来定义，八卦定义如下

震仰盂	.2
巽下断	.3
离中虚	.4
坤六断	.5
兑上缺	.6
乾三连	.7
坎中满	.8
艮覆碗	.9

东-震雷		1.2		（城市）
东南-巽风	1.3		（森林）
南-离火		1.4		（宇宙）
西南-坤地	1.5		（城市）
西-兑泽		1.6		（大海）
西北-乾天	1.7		（宇宙）
北-坎水		1.8		（大海）
东北-艮山	1.9		（森林）


界面设计如下
+-------------------------------------------------
|	+---	+-------------------------		+----
|	| 手	|								} 计
|	| 牌	|		祭牌区					| 分
|	| 区	|								| 区
|	+---	+-------------------------		+----
|
|	+----+	+----+	+----+	+----+	+----+	+----+
|	| 牌	|		|		|		|		| 休
|	| 堆	| 雷	| 离	| 兑	| 坎	| 息
|	| 区	|		|		|		|		| 区
|	+----+	+----+	+----+	+----+	+----+	+----+
|
|--------------------------------------------------
|
|	+----+	+----+	+----+	+----+	+----+	+----+
|	|		|		|		|		|		| 休
|	| 计	| 巽	| 坤	| 乾	| 艮	| 息
|	|		|		|		|		|		| 区
|	| 分	+----+	+----+	+----+	+----+	+----+
|	|
|	| 区	+--------------------+	+----+	+----+
|	|		|						| 手	| 牌
|	|		|	祭牌区				| 牌	| 堆
|	|		|						| 区	| 区
|	+----+	+--------------------+	+----+	+----+
|
+--------------------------------------------------


计分区
+-------+
| 
| 卡牌数
|
|
|
|
+-------+



*/